<template>
  <div class="cm-main">
    <!-- 点击整体 -->
    <div class="main-click">
      <div class="cm">
        <span
          v-for="(a, index) in tabList"
          :key="index"
          @click="change(a.tab_con, index)"
          :class="{ red: index == currentClass }"
          >{{ a.title }}</span
        >
      </div>
      <ul>
        <li
          v-for="(namenum, index) in tabList"
          :key="namenum"
          :title="namenum"
          @click="changetab(namenum.tab_con, index)"
          :class="{ red2: index == currentClass }"
        >
          {{ namenum.title2 }}
        </li>
      </ul>
    </div>

    <!-- 点击切换后的组件内容 -->
    <div class="tab_con">
      <keep-alive>
        <component v-bind:is="currentTab"></component>
      </keep-alive>
    </div>
    <!-- 商品列表 -->
  </div>
</template>

<script>
import first from "./tab/first.vue";
import second from "./tab/second.vue";
import third from "./tab/third.vue";
import four from "./tab/four.vue";
export default {
  name: "Home",
  props: {},
  data() {
    return {
      b: "",
      a: "",
      first: "first",
      second: "second",
      third: "third",
      currentTab: "first", // 默认选中tab
      currentClass: 0, // 默认选中按钮样式
      tabList: [
        {
          title: "宠名优选", // tab文字
          title2: "宠友力荐", // tab文字
          tab_con: "first", // tab对应内容块
        },
        {
          title: "新品首发",
          title2: "好物尝鲜",
          tab_con: "second",
        },
        {
          title: "便宜好货",
          title2: "低价捡漏",
          tab_con: "third",
        },
        {
          title: "进口大牌",
          title2: "品质之选",
          tab_con: "four",
        },
      ],
    };
  },
  components: {
    first,
    second,
    third,
    four,
  },

  methods: {
    // 按钮绑定
    change(tab_con, currentClass) {
      this.currentTab = tab_con;
      this.currentClass = currentClass;
      console.log(this.currentTab);
    },

    changetab(tab_con, currentClass) {
      this.currentTab = tab_con;
      this.currentClass = currentClass;
    },
  },
};
</script>
<style lang="less">
.tab_con {
  width: 100%;
  height: 800px;
}
.red2 {
  background-color: red;
  color: #fff;
  border-radius: 10px;
  height: 20px;
  padding: 0px 5px;
}
.red {
  color: red;
}
.cm-main {
  background-color: #f7f8fa;

  ul {
    width: 100%;
    color: #151e27;
    height: 20px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    color: #adadad;
    padding: 0px 10px;
    li {
      width: 25%;
      text-align: center;
    }
  }
}
// 宠名优选 下面四个切换
.cm {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  font-weight: 800;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  background-color: #f7f8fa;
}
// 商品列表
.van-list {
  font-size: 13px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px 5px;
  background-color: #f7f8fa;
}
.van-cell {
  padding: 0;
}
.cell {
  width: 48%;
  height: 305px;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 10px;
  img {
    width: 100%;
    height: 170px;
  }
  .productName {
    font-size: 14px;
    color: #151e27;
    font-weight: bolder;
    width: 170px;
    height: 40px;
    line-height: 1.35;
    box-sizing: border-box;
    padding: 0 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    border: 1px solid #fff;
  }
  .productName2 {
    font-size: 13px;
    color: #adafb1;
    margin-bottom: 10px;
    padding: 0px 10px;
    margin-top: 10px;
    line-height: 1.2;
  }
  .price {
    font-size: 15px;
    color: #ff2142;
    padding: 0px 10px;
  }
  .discount {
    text-align: center;
    font-size: 10px;
    width: 41px;
    height: 16px;
    background-color: #ff2142;
    color: #fff;
    border-radius: 5px;
    padding: 2px 5px 2px 5px;
  }
}
</style>
